$navHeader: 50px;
.nav {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    margin: 0 auto;
    border: none;
    .nav-header {
        @include eo-line($navHeader, $navHeader + 20px);
        width: $bodyWidth;
        margin: 0 auto;
        font-size: 14px;
        font-weight: bold;
        li {
            float: left;
            @include eo-line(50px);
            a {
                padding: 20px;
                @include eo-line(20px);
                color: #777;
            }
            img {
                @include eo-line(25px);
                padding: 13.5px;
                padding-left: 0;
                padding-top: 12px;
            }
            .goto-register {
                width: 80px;
                height: 100%;
            }
        }
        li:last-child {
            line-height: 50px;
            float: right;
            margin-right: 15px;
        }
    }
}

.second-navbar {
    background-color: #fcfcfc;
    border-bottom: 1px solid #e5e5e5;
    position: fixed;
    width: 100%;
    top: 50px;
    left: 0;
    z-index: 1;
    header {
        //margin: 0 15px;
        li {
            float: left;
            font-size: 14px;
            @include eo-line(50px);
        }
        .title {
            color: #999;
            font-weight: bold;
            width: 106.5px;
            text-indent: 15px;
        }
        .ui-sref-li {
            //margin-right: 15px;
            text-align: center;
            width: 115.5px;
            padding-right: 5px;
            cursor: pointer;
            .iconfont {
                margin-right: 5px;
            }
        }
        .active {
            background-color: #f6f6f6;
            a,
            .iconfont {
                color: $buttonSuccessFocusBgColor;
            }
        }
    }
}

//index
.nav-0 {
    background: none;
    .nav-header {
        li {
            .unread-msg-num-span {
                color: #fff;
                background-color: $buttonDangerBgColor;
                border-radius: 3px;
                padding: 0 10px;
                font-size: 12px;
            }
            .nav-li {
                padding: 0;
                width: 68px;
                @include eo-line(30px, 32px);
                color: #777;
                display: inline-block;
                text-align: center;
                border-radius: 15px;
                font-weight: initial;
                margin-right: 15px;
                border: 1px solid rgba(255, 255, 255, 0);
                .iconfont {
                    cursor: pointer;
                }
                &:hover {
                    color: #fff;
                    background-color: $buttonSuccessBgColor;
                    border: 1px solid $buttonSuccessBorderColor;
                }
            }
        }
        .register-function {
            font-weight: initial;
            .goto-register {
                margin-left: 15px;
                color: $buttonSuccessBgColor;
                border: 1px solid $buttonSuccessBgColor;
                background-color: #fff;
                margin-right: 0;
                &:hover {
                    color: #fff;
                    background-color: $buttonSuccessBgColor;
                    border: 1px solid $buttonSuccessBorderColor;
                }
            }
        }
        .list-function {
            float: right;
            font-weight: initial;
            .api-center {
                width: auto;
                .iconfont {
                    margin-right: 5px;
                }
                &:hover {
                    background: none;
                    color: #333;
                }
            }
            .list {
                border: 1px solid #e7e7e7;
                background-color: #fff;
                margin-left: 5px;
                margin-right: 0;
                cursor: pointer;
                &:hover {
                    ul {
                        display: block;
                    }
                    .first-icon {
                        color: #fff;
                    }
                }
            }
            ul {
                display: none;
            }
            .list-function-wrap {
                position: absolute;
                cursor: default;
                margin-left: -131px;
                margin-top: -2px;
                .iconfont {
                    margin: 0;
                    cursor: pointer;
                }
            }
            .logout-btn {
                background-color: #fff;
                width: 200px;
                border: 1px solid #e7e7e7;
                border-radius: 3px;
                margin-top: 5px;
                a {
                    padding: 0;
                    text-indent: 0;
                }
                .iconfont {
                    color: #333;
                    float: right;
                    @include eo-line(43px);
                }
                li {
                    float: none;
                    cursor: pointer;
                    font-weight: initial;
                    text-align: left;
                    height: auto;
                }
                .title {
                    @include eo-line(43px);
                    padding: 10px 10px;
                    border-bottom: 1px solid #f1f1f1;
                    cursor: default;
                    p {
                        @include eo-line(22px);
                    }
                    .nickname-p {
                        font-weight: bold;
                    }
                    .username-p {
                        font-size: 12px;
                        color: #999;
                    }
                }
                li:last-child {
                    margin: 0;
                }
                .list-function-detail {
                    li {
                        padding: 0 10px;
                        @include eo-line(43px);
                        &:hover {
                            background-color: #f0f0f0;
                        }
                    }
                }
            }
        }
        .active {
            a {
                color: $buttonSuccessBgColor;
                border: 1px solid $buttonSuccessBgColor;
                background-color: #fff;
            }
        }
    }
}

//register
.nav-1 {
    .register-nav-header {
        @include eo-line($navHeader + 10px, $navHeader + 30px);
    }
}

//3:share.project/4:home/project/database
.nav-2 {
    background: #fff;
    z-index: 2;
    border-bottom: 1px solid #e5e5e5;
    position: fixed;
    .nav-header {
        @include eo-width(100%, 30px);
        .go-index-btn {
            cursor: pointer;
        }
        li {
            .unread-msg-num-span {
                color: #fff;
                background-color: $buttonDangerBgColor;
                border-radius: 3px;
                padding: 0 10px;
                font-size: 12px;
            }
            .nav-li {
                padding: 0;
                width: 94px;
                @include eo-line(30px);
                padding: 0 10px;
                color: #777;
                display: inline-block;
                text-align: center;
                border-radius: 15px;
                font-weight: initial;
                margin-right: 15px;
                border: 1px solid #fff;
                .first-icon {
                    color: #777;
                    margin-right: 5px;
                }
                &:hover {
                    color: #fff;
                    background-color: $buttonSuccessBgColor;
                    border: 1px solid $buttonSuccessBorderColor;
                    @include eo-line(32px);
                    .first-icon {
                        color: #fff;
                    }
                    .unread-msg-num-span {
                        line-height: 15px;
                    }
                }
                .unread-num {
                    float: right;
                    line-height: 32px;
                }
            }
            .active {
                color: $buttonSuccessBgColor;
                border: 1px solid $buttonSuccessBgColor;
                background-color: #fff;
                .iconfont {
                    color: $buttonSuccessBgColor;
                }
            }
        }
        .list-function {
            float: right;
            font-weight: initial;
            .list {
                border: 1px solid #e7e7e7;
                background-color: #fff;
                margin-left: 5px;
                margin-right: 0;
                cursor: pointer;
                .iconfont {
                    margin: 0;
                    cursor: pointer;
                }
                &:hover {
                    ul {
                        display: block;
                    }
                }
            }
            ul {
                display: none;
            }
            .list-function-wrap {
                position: absolute;
                cursor: default;
                margin-left: -108px;
            }
            .logout-btn {
                background-color: #fff;
                width: 200px;
                border: 1px solid #e7e7e7;
                border-radius: 3px;
                margin-top: 5px;
                a {
                    padding: 0;
                    text-indent: 0;
                }
                .iconfont {
                    color: #333;
                    float: right;
                    @include eo-line(43px);
                }
                li {
                    float: none;
                    cursor: pointer;
                    font-weight: initial;
                    text-align: left;
                    height: auto;
                }
                .title {
                    @include eo-line(43px);
                    padding: 10px 10px;
                    border-bottom: 1px solid #f1f1f1;
                    cursor: default;
                    p {
                        @include eo-line(22px);
                    }
                    .nickname-p {
                        font-weight: bold;
                    }
                    .username-p {
                        font-size: 12px;
                        color: #999;
                    }
                }
                li:last-child {
                    margin: 0;
                }
                .list-function-detail {
                    li {
                        padding: 0 10px;
                        @include eo-line(43px);
                        &:hover {
                            background-color: #f0f0f0;
                        }
                    }
                }
            }
        }
        .user {
            margin-right: 0;
            a {
                font-weight: initial;
                .iconfont {
                    margin-right: 5px;
                }
            }
        }
        .opacity-project-li {
            opacity: 0;
            position: absolute;
            margin-left: 106.5px;
        }
    }
}
